<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实例化多个对象</title>
		<script src="../node_modules/vue/dist/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--实例化一-->
		<div id="testVueOne">
			<!--
            	作者：zhangtanlin90@126.com
            	时间：2018-04-02
            	描述：调用组件是使用单标签
            		  <greeting/>和双标签<greeting></greeting>
            		    都可以调用组件
            -->
			<greeting/>
		</div>
		
		<!--实例化二-->
		<div id="testVueTwo">
			<greeting></greeting>
		</div>
		
		<script type="text/javascript">
			/**
			 * 创建简单组件
			 * 组件一定要写在调用之前，不然Vue容器调用不到
			 * template是模板的意思
			 */
			Vue.component('greeting',{
				template:'<p>我是简单组件内的p标签</p>'
			})
			
			
			/**
			 * 调用Vue容器
			 */
			var one = new Vue({
				el:'#testVueOne'
			});
			var two = new Vue({
				el:'#testVueTwo'
			});
		</script>
	</body>
</html>
